<template>
  <el-dialog
    :visible.sync="showCon"
    width="400px"
    top="20vh"
    :append-to-body="true"
    :close-on-click-modal="false"
    :show-close="false"
    :close-on-press-escape="false"
  >
    <div slot="title" class="title_close">
      <!-- 请输入原登录密码 -->
      <div class="title" v-if="setType == 2">
        {{ $t("inccom.confirmPass.56hueien3e40") }}
      </div>
      <div class="title" v-else>
        {{ $t("inccom.confirmPass.56hueien5ws0") }}
      </div>
      <img src="@/assets/img/icon_gb1.png" class="close" @click="hideConPass" />
    </div>
    <!-- 输入新密码 -->
    <div class="phone_captcha">
      <!-- 密码 -->
      <h2 v-if="setType == 2">{{ $t("inccom.confirmPass.56hueien6gg0") }}</h2>
      <h2 v-else>{{ $t("inccom.confirmPass.56hueien6v40") }}</h2>
      <div class="f-cb leftfix box">
        <div class="border">
          <PasswordInput
            @passwordChange="(val) => (password = val)"
            :placeholderContent="
              setType == 2
                ? $t('inccom.confirmPass.56hueien7980')
                : $t('inccom.confirmPass.56hueien5ws0')
            "
          >
          </PasswordInput>
        </div>
        <div class="forgetPass" @click="forgetPass">
          {{
            setType == 2
              ? $t("inccom.confirmPass.56hueien7ns0")
              : $t("inccom.confirmPass.56hueien89k0")
          }}
        </div>
      </div>
      <button @click="conPassword" class="submit">
        {{ $t("m.determine") }}
      </button>
    </div>
    <!-- 修改密码对话框 -->
    <SetPass :showPass="isShowPasswordDia" @closeSet="closeSet"></SetPass>
    <CaptchaDia
      :isloginPass="loginPass"
      :showCap="captchaShow"
      :IsForget="true"
      @closeCapDia="closeCapDia"
    ></CaptchaDia>
    <BussPassword
      :isResetPass="false"
      :showBussPass="showBussPass"
      @closeBussPassDia="closeBussPassDia"
    ></BussPassword>
    <!-- 修改交易密码 -->
    <Phone
      :showPho="phoneShow"
      :title="phoneTitle"
      :isForgetTraPwd="true"
      @closePhone="closePhone"
    >
    </Phone>
  </el-dialog>
</template>

<script>
import { getTradePwd } from "@/assets/js/API/Member.js";
import { post_check_password } from "@/assets/js/API/user.js";
import PasswordInput from "@/components/common/PasswordInput.vue";
import SetPass from "./SetPassword";
import CaptchaDia from "./CaptchaDialog";
import BussPassword from "./BussPassword";
import Phone from "./Phone";
export default {
  components: {
    SetPass,
    CaptchaDia,
    BussPassword,
    Phone,
    PasswordInput,
  },
  props: {
    showCon: Boolean,
    setType: Number,
  },
  data() {
    return {
      lang: "",
      cities: [],
      name: this.$i18n.t("m.ObtainCode"),
      disabled: false,
      password: "",
      passFlag: true,
      captchaShow: false, // 发送手机验证码对话框
      loginPass: 0,
      isShowPasswordDia: false, // 展示修改密码登录框
      showBussPass: false, // 设置交易密码对话框
      phoneShow: false, // 修改手机号对话框
      phoneTitle: this.$t("inccom.confirmPass.56hueien7ns0"),
    };
  },
  created() {},
  mounted() {
    this.lang = localStorage.getItem("lang");
    var lang = localStorage.getItem("lang") == "en" ? "en" : "zh-CN";
  },
  methods: {
    async conPassword() {
      let res;
      if (this.setType == 2) {
        res = await getTradePwd({
          password: this.password,
        });
        if (res.code != 1) return this.$message.error(res.msg);
        this.showBussPass = true;
      } else {
        res = await post_check_password({
          password: this.password,
        });
        if (res.code != 1) return this.$message.error(res.msg);
        this.isShowPasswordDia = true;
      }
      this.hideConPass();
      return this.$message.success(res.msg);
    },
    // 忘记密码
    forgetPassword() {
      this.hideSetPass();
      this.phoneShow = true;
    },
    hideConPass() {
      this.$emit("closeConfirm");
    },
    // 关闭设置登录密码对话框
    closeBussPassDia() {
      this.showBussPass = false;
    },
    // 关闭修改登录密码对话框
    closeSet() {
      this.isShowPasswordDia = false;
    },
    closePhone() {
      this.phoneShow = false;
    },
    // 关闭修改登录密码对话框
    closeCapDia() {
      this.captchaShow = false;
    },
    // 忘记密码对话框
    forgetPass() {
      if (this.setType == 2) {
        // 忘记交易密码
        this.phoneShow = true;
        // this.loginPass = 2;
      } else if (this.setType == 1) {
        this.loginPass = 1;
        this.captchaShow = true;
      } else {
        this.loginPass = 3;
        this.captchaShow = true;
      }
      this.hideConPass();
    },
  },
};
</script>
<style lang="less">
.phone_captcha {
  h2 {
    color: @fbSix;
    font-size: 12px;
    padding-top: 8px;
  }
  .leftfix {
    padding-left: 0;
    padding-right: 0;
    .border {
      // border: 1px solid @fbSix;
      // border-radius: 3px;
      margin-top: 12px;
      .password_input {
        .close_icon {
          height: 22px;
          margin-top: 10px;
        }
        .el-input__inner {
          border: none;
          color: @fff;
          background-color: @LightBorderLine;
        }
      }
    }
    .forgetPass {
      cursor: pointer;
      font-size: 12px;
      color: @fbSix;
      width: 100%;
      text-align: right;
      padding-top: 5px;
    }
  }
  .submit {
    width: 100%;
    background-color: @hoverColor;
    height: 40px;
    border-radius: 3px;
    border: 1px solid transparent;
    color: @fff;
    font-size: 12px;
    margin-top: 30px;
  }
}
</style>